<template>
  <div class="single-page">
    <ShowSearch @searchChangeFn="searchChangeFn"
                v-model:formData="searchData"/>
    <!-- 内容显示区域 -->
    <div class="content-area margin-top_20">
      <ProjectListTable
          :columns="columns"
          :data="dataSource"
          :pagination="pagination"
          @tableChange="tableChange"
          @editFunc="editFunc"
          @delFunc="delFunc"
          @detailFunc="detailFunc"
          :isloading="isloading"
      />
    </div>
    <a-modal
        v-model:visible="formState.modalVisiable"
        :title="modalState.title"
        @ok="handleOk"
        class="edit-modal"
        width="90%">
      <div class="edit-area">
        <div class="edit-content_area">
          <a-tabs v-model:activeKey="activeKey" :about="100">
            <a-tab-pane key="1" tab="基础信息">
              <div class="single-tab">
                <div class="tab-clumn_layout">
                  <div class="left-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">名称</label>
                  </div>
                  <div class="right-input">
                    <a-input
                        class="input-style"
                        v-model:value="zhState.projectName"
                    />
                  </div>
                </div>

                <div class="tab-clumn_layout margin-top_20">
                  <div class="left-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">导演</label>
                  </div>
                  <div class="right-input">
                    <a-input
                        class="input-style"
                        v-model:value="zhState.director"
                    />
                  </div>
                </div>

                <div class="tab-clumn_layout margin-top_20">
                  <div class="left-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">编剧</label>
                  </div>
                  <div class="right-input">
                    <a-input
                        class="input-style"
                        v-model:value="zhState.screenWriter"
                    />
                  </div>
                </div>

                <div class="tab-clumn_layout margin-top_20">
                  <div class="left-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">主演</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState.cast"/>
                  </div>
                </div>

                <div class="tab-clumn_layout margin-top_20">
                  <div class="left-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">集数</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState.episode"/>
                  </div>
                </div>

                <div class="tab-clumn_layout margin-top_20">
                  <div class="left-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">时长</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState.length"/>
                  </div>
                </div>

                <div class="tab-clumn_layout margin-top_20">
                  <div class="left-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">类型</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState.subType"/>
                  </div>
                </div>

                <div class="tab-clumn_layout margin-top_20">
                  <div class="left-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">题材</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState.genres"/>
                  </div>
                </div>
                <div class="tab-clumn_layout margin-top_20">
                  <div class="left-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">首播时间</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState.broadcastingDate"/>
                  </div>
                </div>
                <div class="tab-clumn_layout margin-top_20">
                  <div class="left-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">制片公司</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState.productionCompany"/>
                  </div>
                </div>
                <div class="tab-clumn_layout margin-top_20">
                  <div class="left-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">评分</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState.rating"/>
                  </div>
                </div>
                <div class="tab-clumn_layout margin-top_20">
                  <div class="left-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">获奖</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState.awards"/>
                  </div>
                </div>
                <div class="tab-clumn_layout margin-top_20">
                  <div class="left-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">首播平台</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState.broadcastingNetwork"/>
                  </div>
                </div>
                <div class="tab-clumn_layout margin-top_20">
                  <div class="left-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">在线播放平台</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState.broadcastingNetworkOnline"/>
                  </div>
                </div>
                <div class="tab-clumn_layout margin-top_20">
                  <div class="left-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">播出平台</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState.broadcastingPlatform"/>
                  </div>
                </div>
                <div class="tab-clumn_layout margin-top_20">
                  <div class="left-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">剧情梗概</label>
                  </div>
                  <div class="right-input">
                    <a-textarea style="height: 200px;" v-model:value="zhState.synopsis"/>
                  </div>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="剧照" force-render>
              <draggable
                  v-model:list="zhState.stillsList"
                  item-key="id"
                  ghost-class="ghost"
                  chosen-class="chosenClass"
                  animation="500">
                <template #item="{ element }">
                  <div class="img-con">
                    <a-image
                        style="width: 100px;height: 140px;"
                        :src="element.tmpUrl"
                    />
                    <a-popconfirm
                        title="是否删除?"
                        @confirm="delImgFunc(element,zhState.stillsList)"
                        :getPopupContainer="(triggerNode:any) => {return triggerNode.parentNode}"
                    >
                      <div class="del-icon"></div>
                    </a-popconfirm>
                  </div>
                </template>
              </draggable>
            </a-tab-pane>
            <a-tab-pane key="3" tab="海报" force-render>
              <draggable
                  v-model:list="zhState.posterList"
                  item-key="id"
                  ghost-class="ghost"
                  chosen-class="chosenClass"
                  animation="500">
                <template #item="{ element }">
                  <div class="img-con">
                    <a-image
                        style="width: 100px;height: 140px;"
                        :src="element.tmpUrl"
                    />
                    <a-popconfirm
                        title="是否删除?"
                        @confirm="delImgFunc(element,zhState.posterList)"
                        :getPopupContainer="(triggerNode:any) => {return triggerNode.parentNode}"
                    >
                      <div class="del-icon"></div>
                    </a-popconfirm>
                  </div>
                </template>
              </draggable>
            </a-tab-pane>
            <a-tab-pane key="4" tab="片花" force-render>
              <draggable
                  v-model:list="zhState.trailersList"
                  item-key="id"
                  ghost-class="ghost"
                  chosen-class="chosenClass"
                  animation="500">
                <template #item="{ element }">
                  <div class="img-con" style="width: 49%; margin: 5px 5px 0 0">
                    <video style="width: 100%" controls>
                      <source :src="element.tmpUrl" type="video/mp4">
                    </video>
                    <a-popconfirm
                        title="是否删除?"
                        @confirm="delImgFunc(element,zhState.trailersList)"
                        :getPopupContainer="(triggerNode:any) => {return triggerNode.parentNode}"
                    >
                      <div class="del-icon"></div>
                    </a-popconfirm>
                  </div>
                </template>
              </draggable>
            </a-tab-pane>
            <a-tab-pane key="5" tab="新闻" force-render>
              <a-list style="margin: 1px 40px 5px 40px;color: #515a6e;" item-layout="horizontal"
                      :data-source="zhState.newsList">
                <template #renderItem="{item,index}">
                  <a-list-item>
                    <a-list-item-meta :description='item.refs'>
                      <template #title>
                        <a :href='item.href' target="_blank">{{ index + 1 }}. {{ item.url }}</a>
                      </template>
                    </a-list-item-meta>
                  </a-list-item>
                </template>
              </a-list>
            </a-tab-pane>
          </a-tabs>
        </div>

        <div class="edit-content_area">
          <!--          <a-tabs v-model:activeKey="activeKey">-->
          <a-tabs>
            <a-tab-pane key="1" tab="Basic">
              <div class="single-tab">
                <div class="tab-clumn_layout">
                  <div class="english-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">Project Name</label>
                  </div>
                  <div class="right-input">
                    <a-input
                        class="input-style" v-model:value="zhState2.projectName"
                    />
                  </div>
                </div>

                <div class="tab-clumn_layout margin-top_20">
                  <div class="english-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">Director</label>
                  </div>
                  <div class="right-input">
                    <a-input
                        class="input-style"
                        v-model:value="zhState2.director"
                    />
                  </div>
                </div>

                <div class="tab-clumn_layout margin-top_20">
                  <div class="english-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">Screenwriter</label>
                  </div>
                  <div class="right-input">
                    <a-input
                        class="input-style"
                        v-model:value="zhState2.screenWriter"
                    />
                  </div>
                </div>

                <div class="tab-clumn_layout margin-top_20">
                  <div class="english-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">Cast</label>
                  </div>
                  <div class="right-input">
                    <a-input
                        class="input-style"
                        v-model:value="zhState2.cast"
                    />
                  </div>
                </div>

                <div class="tab-clumn_layout margin-top_20">
                  <div class="english-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">Episode</label>
                  </div>
                  <div class="right-input">
                    <a-input
                        class="input-style"
                        v-model:value="zhState2.episode"
                    />
                  </div>
                </div>

                <div class="tab-clumn_layout margin-top_20">
                  <div class="english-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">Length</label>
                  </div>
                  <div class="right-input">
                    <a-input
                        class="input-style"
                        v-model:value="zhState2.length"
                    />
                  </div>
                </div>

                <div class="tab-clumn_layout margin-top_20">
                  <div class="english-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">Type</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState2.subType"/>
                  </div>
                </div>

                <div class="tab-clumn_layout margin-top_20">
                  <div class="english-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">Genders</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState2.genres"/>
                  </div>
                </div>
                <div class="tab-clumn_layout margin-top_20">
                  <div class="english-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">Year Of Production</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState2.broadcastingDate"/>
                  </div>
                </div>
                <div class="tab-clumn_layout margin-top_20">
                  <div class="english-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">Production Company</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState2.productionCompany"/>
                  </div>
                </div>
                <div class="tab-clumn_layout margin-top_20">
                  <div class="english-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">Rating</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState2.rating"/>
                  </div>
                </div>
                <div class="tab-clumn_layout margin-top_20">
                  <div class="english-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">Awards</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState2.awards"/>
                  </div>
                </div>
                <div class="tab-clumn_layout margin-top_20">
                  <div class="english-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">Broadcasting Network</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState2.broadcastingNetwork"/>
                  </div>
                </div>
                <div class="tab-clumn_layout margin-top_20">
                  <div class="english-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">Broadcasting Online</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState2.broadcastingNetworkOnline"/>
                  </div>
                </div>
                <div class="tab-clumn_layout margin-top_20">
                  <div class="english-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">Broadcasting Platform</label>
                  </div>
                  <div class="right-input">
                    <a-input class="input-style" v-model:value="zhState2.broadcastingPlatform"/>
                  </div>
                </div>
                <div class="tab-clumn_layout margin-top_20">
                  <div class="english-label">
                    <span style="color: red">*</span
                    ><label class="margin-left_5">Synopsis</label>
                  </div>
                  <div class="right-input">
                    <a-textarea style="height: 200px;" v-model:value="zhState2.synopsis"/>
                  </div>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import draggable from 'vuedraggable'
import {
  PlusOutlined,
  SearchOutlined,
  SmileOutlined,
  DownOutlined,
  UpOutlined,
} from "@ant-design/icons-vue";
import {ref, onMounted, computed, reactive, provide, inject, watch} from "vue";
import {message, TableColumnsType} from "ant-design-vue";
import type {Dayjs} from "dayjs";
import LabelInput from "@/components/formItem/label-input.vue";
import LabelSingleDatePicker from "@/components/formItem/label-singleDatePicker.vue";
import LabelSelect from "@/components/formItem/label-select.vue";
import ProjectListTable from "@/components/page/projectList-table.vue";
import {post, apipost, get, mockGet} from "@/service/request";
import ShowSearch from "./compontents/show-search.vue";

const reload: any = inject("reload");

const tableSelectChangeRowKeys = ref([] as any[]);

function updateSelectChangeRowKeys(rowKeys: any[]) {
  tableSelectChangeRowKeys.value = rowKeys;
}

const location = ref("Hello world");

function updateLocation() {
  location.value = "You see me";
}

provide("location", {
  location,
  updateLocation,
});

provide("showTableProvide", {
  tableSelectChangeRowKeys,
  updateSelectChangeRowKeys,
});

let provideValue = reactive({modalVisable: false});
provide("modalVisiableValue", provideValue.modalVisable);

const zhState = ref({
  projectName: "",
  director: "",
  mainPic: "",
  screenWriter: "",
  cast: "",
  episode: "",
  length: "",
  subType: "",
  genres: "",
  broadcastingDate: "",
  productionCompany: "",
  broadcastingNetwork: "",
  broadcastingNetworkOnline: "",
  broadcastingPlatform: "",
  rating: "",
  awards: "",
  synopsis: "",
  stillsList: [],
  trailersList: [],
  newsList: [],
  posterList: [],
});

const zhState2 = ref({
  projectName: "",
  director: "",
  mainPic: "",
  screenWriter: "",
  cast: "",
  episode: "",
  length: "",
  subType: "",
  genres: "",
  broadcastingDate: "",
  productionCompany: "",
  broadcastingNetwork: "",
  broadcastingNetworkOnline: "",
  broadcastingPlatform: "",
  rating: "",
  awards: "",
  synopsis: "",
  stillsList: [],
  trailersList: [],
  newsList: [],
  posterList: [],
});

function updateZhState(record: any) {
  zhState.value = Object.assign(record);
}

provide("showZhModalProvide", {
  zhState,
  updateZhState,
});

const formState = reactive({
  modalVisiable: false,
});

const modalState = reactive({
  title: "",
});


const selectedTypeValue = ref<string>("");

const activeKey = ref("1");
const selectedStyleValue = ref<string>("");

const getSelectedType = (value: any) => {
  selectedTypeValue.value = value;
};
const getSelectedStyle = (value: any) => {
  selectedStyleValue.value = value;
};

const isShowMore = ref<boolean>(false);
const isShowMoreFunc = () => {
  isShowMore.value = !isShowMore.value;
};
// 表格相关
const columns = ref<TableColumnsType>([
  {
    title: "名称",
    dataIndex: "projectName",
    key: "projectName",
    resizable: true,
    width: 120,
    fixed: "left",
    align: "center",
    // sorter: (a: any, b: any) => a.id - b.id,
  },
  {
    title: "封面",
    dataIndex: "mainPicUrl",
    key: "mainPicUrl",
    resizable: true,
    width: 90,
    minWidth: 90,
    maxWidth: 200,
    align: "center",
  },
  {
    title: "类别",
    dataIndex: "subType",
    key: "subType",
    resizable: true,
    width: 100,
    minWidth: 100,
    maxWidth: 200,
    align: "center",
  },
  {
    title: "题材",
    dataIndex: "genres",
    key: "genres",
    resizable: true,
    width: 100,
    minWidth: 100,
    maxWidth: 200,
    align: "center",
    ellipsis: true,
  },
  // {
  //   title: "播出平台",
  //   dataIndex: "broadcastingNetwork",
  //   key: "broadcastingNetwork",
  //   resizable: true,
  //   width: 100,
  //   minWidth: 100,
  //   maxWidth: 200,
  //   ellipsis: true,
  //   align: "center",
  // },
  {
    title: "集数/时长",
    dataIndex: "episode",
    key: "episode",
    resizable: true,
    width: 100,
    minWidth: 100,
    maxWidth: 200,
    align: "center",
  },
  {
    title: "制片年份",
    dataIndex: "broadcastingDate",
    key: "broadcastingDate",
    resizable: true,
    width: 120,
    minWidth: 160,
    maxWidth: 200,
    align: "center",
  },
  {
    title: "抓取日期",
    dataIndex: "createDate1",
    key: "createDate1",
    resizable: true,
    width: 100,
    minWidth: 100,
    maxWidth: 200,
    align: "center",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    resizable: true,
    width: 100,
    minWidth: 100,
    maxWidth: 200,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "operations",
    key: "operations",
    resizable: true,
    width: 140,
    fixed: "right",
    align: "center",
  },
]);

interface DataItem {
  id: number;
  projectName: string;
  style: string;
  type: string;
  genres: string;
  productionArea: string;
  language: string;
}

const searchData = reactive({
  projectName: "",
  creatDateStart: "",
  creatDateEnd: "",
  status: "",
  subType: "",
  yearOfProductionStart: '',
  yearOfProductionEnd: '',
});


const dataSource = ref([] as DataItem[]);

onMounted(() => {
  // 获取项目列表
  getProjectList();
});
const isloading = ref<boolean>(false);
const getProjectList = () => {

  post(`/mediaItem/pageList`, searchData, {
    current: pagination.current,
    size: pagination.pageSize,
  }).then((res: any) => {
    if (res.errCode == 0) {
      let projectList = [];
      projectList = Object.assign(res.data.records);
      projectList.forEach((record: any) => {
        if (record.createDate) {
          record.createDate1 = record.createDate.split(" ")[0]
        }
      })
      pagination.total = res.data.total
      dataSource.value = projectList;
    } else {
    }
  });
};

const pagination = reactive({
  size: "small",
  showSizeChanger: true,
  position: ["bottomCenter"],
  hideOnSinglePage: true,
  current: 1,
  pageSize: 10,
  total: 0,
  onShowSizeChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize
  },
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize
  },
});


const projectName = ref("");


const searchChangeFn = (data: any) => {
  pagination.current = 1
  getProjectList()
}


const tableChange = () => {
  getProjectList()
};

const delImgFunc = (ele: any, list: any) => {
  post(`/python/delRel`, ele).then((res: any) => {
    if (res.errCode == 0) {
      list.map((it: any, i: any) => {
        if (it == ele) {
          list.splice(i, 1)
          return
        }
      });
    } else {
      message.warning(res.msg);
    }
  });
}

const editFunc = (record1: any, record2: any, title: any) => {
  zhState.value = Object.assign(record1);
  zhState2.value = Object.assign(record2 ? record2 : {});
  formState.modalVisiable = true;
  modalState.title = title;
};
const delFunc = (id: number) => {
};
const detailFunc = (record1: any, record2: any, title: any) => {

  zhState.value = Object.assign(record1);
  zhState2.value = Object.assign(record2 ? record2 : {});
  formState.modalVisiable = true;
  modalState.title = title;
};
watch(() => formState.modalVisiable, (value) => {
  if (!value) {
    activeKey.value = "1";
  }
})
const handleOk = () => {
  post(`/mediaItem/update`, {
    record1: zhState.value,
    record2: zhState2.value
  }).then(
      (res: any) => {
        if (res.errCode == 0) {
          formState.modalVisiable = false;
          activeKey.value = "1"
        } else {
          message.warning("网络异常，请稍后再试");
        }
        getProjectList();
      }
  );
};

</script>
<style lang="less" scoped>

:global(.edit-modal .ant-modal-body) {
  background: #f6f6f6;
}

.single-page {
  .add-area {
    width: 100%;
  }

  .clumn-layout {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .content-area {
    width: 100%;
  }
}

.img-con {
  display: inline-block;
  margin: 5px;
  display: inline-block;
  position: relative;

  :deep(.ant-popover-buttons) {
    display: flex;
  }
}

.del-icon {
  opacity: 0.8;
  position: absolute;
  width: 15px;
  height: 15px;
  //border: 1px solid red;
  border-radius: 50%;
  top: 0;
  right: 0;
  transform: rotate(45deg);
}

.del-icon::before {
  opacity: 0.7;
  display: block;
  position: absolute;
  content: "";
  width: 15px;
  height: 2px;
  background-color: #2db7f5;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);

}

.del-icon::after {
  opacity: 0.7;
  display: block;
  position: absolute;
  content: "";
  width: 2px;
  height: 15px;
  background-color: #2db7f5;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);

}

:deep(.tab-clumn_layout) {
  display: flex;
  align-items: center;
}

:deep(.left-label) {
  width: 10%;
}

:deep(.right-input) {
  width: 90%;
}

:deep(.input-style) {
  width: 90%;
  border-radius: 5px;
}


:deep(.ant-tabs-nav-list) {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
</style>
<style lang="less" scoped>
@import "@/style/page.less";
@import "index.less";
</style>
